
<div style="padding: 20px;">
	<h3>Review your items for Checkout</h3>
	<hr>
	<div id="items-final"></div>

	<hr>
	<div id="buttons">
	<div style="float:right;margin-right:20px;margin-bottom:10px;">
		<button id="processorder">Proceed ></button>
	</div>
	<div style="float:left;margin-right:20px;margin-bottom:10px;">
		<button id="backtocart">< Back to Shopping</button>
	</div>
	</div>
	

	<hr>
</div>

<script type="text/javascript">

$(document).ready(function(){


	//Load existing items.
	$.getJSON('<?php print base_url(); ?>cart/getitems', function(data) {
		var text='';
		var totalprice=0;
		var totalitems=0;
		$.each(data,function(key,val){
			text=text+'<ul style="background-color:#FFC" class="fielddiv ui-widget ui-helper-clearfix" >';
			text=text+'<li class="ui-state-default ui-corner-all delfield" attrid='+val.attrid+' ><span class="ui-icon ui-icon-check"></span></li>';
			text=text+'<li style="width:70%">'+val.name+'</li>';
			text=text+'<li style="width:10%">'+val.price+'</li>';
			text=text+'<li style="width:10%">'+val.count+'</li>';
			totalprice+=val.price*parseInt(val.count);
			totalitems+=val.count*1;

			
		    text=text+'</ul>';
		});
		
		text=text+'<ul style="background-color:#CCF; padding:10px;" class="fielddiv ui-widget ui-helper-clearfix" >';
		text=text+'<li >&nbsp;&nbsp;&nbsp;&nbsp;</li>';
		text=text+'<li style="width:70%"><b>Grand Total</b></li>';
		text=text+'<li style="width:10%"><b>$'+totalprice+'</b></li>';
		text=text+'<li style="width:10%"><b>'+totalitems+'</b></li>';

	    text=text+'</ul>';
		

		$('#items-final').html(text);
	});

	$('#backtocart').button().click(function(){
		window.location ='cwelcome';
	});

	$('#processorder').button().click(function(){
		window.location = 'processcheckout';
	});

		

	
});

</script>
